<template id="unauthorized">
    <div class="chose_one_1">
        <div class="arrive_two_top_1">
            <img src="../image/blue_da.png" alt="" @click="get_tui()">
            <h4>选择收货地址</h4>
            <span style="display:none">新增地址</span>
        </div>

        <div class="arrive_two_container_1">
            <img src="../image/block_s.jpg" alt="" id="im_gmm_1">
            <div class="arrive_two_first_1">
                <!--style=" border-right:0.01rem solid #cccccc;"-->
                <select name="" id="arrive_two_sel_add_1" >

                    <option v-for="city_m in my_city">{{city_m}}</option>

                </select>
                <input type="text" placeholder="请搜索支持配送的小区，写字楼" class="arrive_two_input_1" readonly="readonly" @click="get_arr_two()">
                <img src="../image/fa.jpg" alt="" class="arrive_two_kl_1">
                <p class="arr_p_1">温馨提示:因各地商品和配送服务不同，请您选择准确的时间地址</p>
            </div>
        </div>

        <p class="arrive_pp_1">
            <img src="../image/x_m.jpg" alt="" class="im_xm_1">
            <time  @click="get_md()">{{adress_detail}}</time>
            <span class="arrive_span_1">当前位置</span>
            <img src="../image/x_y.jpg" alt="" class="im_yy_1"  @click="get_d()">
            <img src="../image/location-icon-locating.gif" alt="" class="location_im" v-if="gif">
        </p>

        <!--我的地址-->
           <div class="my_add_1" v-if="uid && time && token">
                  <p class="my_p_1">我的收货地址</p>

               <div class="my_add_1_1" v-for="add_s in add_list">
                   <div class="my_add_1_xiu_2_1" ><span>{{add_s.consignee}}</span> <span>{{add_s.mobile}}</span></div>
                   <div class="my_add_1_xiu_3_1"  @click="setaddress(1,add_s.address)"><span>{{add_s.address}}</span></div>
                   <div class="my_add_1_home_mm_1"  v-if="this.type==1">家</div>
                   <div class="my_add_1_home_mm_1"  v-if="this.type==2">公司</div>
               </div>
               <p class="my_ming_p_1">更多收货地址
                   <img src="../image/x_mm.jpg" alt="">
               </p>
           </div>

           <!--附近位置-->
         <div class="fu_jin_1">
                  附近地址
         </div>
         <ul class="my_ul_1">
                <li v-for="li_near in list_near"  @click="setaddress(1,li_near)">{{li_near}}</li>
         </ul>
         <!--百度容器-->
        <div  style="height:0.2rem;width:0.2rem" id="near_1" v-show="disp"></div>


    </div>
</template>
<script>
    import BMap from 'BMap'
    export default{
        name: 'unauthorized',
        components:{
        },
        data(){
            return{
                disp:false,
                type:1,
                ty:this.$route.query.type,
                //具体地址的信息字段
                adress_detail:"上海市人民广场",
                //上海市的信息字段
                adress_s:'上海市',
                my_city:[],
                city:'',
              //经度
                lon:116.331398,
                //纬度
                latm:39.897445,
                //搜索地址
                near_init:'',
                //附近搜索地址的数组
                near_m:[],

                uid:this.GLOBAL.getCookie('uid'),
                time:this.GLOBAL.getCookie('time'),
                token:this.GLOBAL.getCookie('token'),
                //地址列表
                add_list:[],
                /*附近地址的列表*/
                list_near:[],
                map:'',
                /*定位的gif图的字段*/
                gif:false,
                gif_1:true,
            }
        },

        mounted:function(){
            if(this.$route.query.mm){
                this.adress_detail = this.$route.query.mm;
                this.adress_s      = this.$route.query.adress_s;
                this.lon           = this.$route.query.longitude;
                this.latm          = this.$route.query.latitude;
            }

            var map    = new BMap.Map("near_1");
            map.centerAndZoom(new BMap.Point(this.lon,this.latm), 11);
            this.map = map;
            //附近地址的方法
            this.get_near();

            //获取地址的方法
            this.get_request();

           /*alert();
           alert(this.$route.query.latitude);*/
            let h=$(window).height();
            $('.chose_one_1').height(h);
            /*type参数为二的接口数据*/
            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/Position.php?mode=getDispatchCity',
                {
                    params: {
                        type:this.ty
                    },
                    jsonp:'callback'
                }
            ).then(function (res) {
                if(res.body.code==200){
                    this.my_city=res.body.data.city;
                }
            });

        },
        methods: {
            get_md:function(){
                this.$router.push('/recommend')
            },
            /*返回首页地址*/
            setaddress(stat,address){
                this.GLOBAL.set_address(stat,address);
                //把选中的地址添加到首页进行经纬度解析

                this.$router.push('/recommend')
            },
            //跳到搜索页面
            get_arr_two:function(){
                this.$router.push('/arrive_two?lo='+this.lon+'&la='+this.latm);
            },
            get_request:function(){
                if(this.uid && this.time && this.token){
                    this.$http.jsonp(
                        this.GLOBAL.BaseUrl+'/mobile/api/v1/Address.php?mode=index',
                        {
                            params: {
                                uid:this.GLOBAL.getCookie('uid'),
                                time:this.GLOBAL.getCookie('time'),
                                token:this.GLOBAL.getCookie('token'),
                            },
                            jsonp:'callback'
                        }
                    ).then(function (res) {

                        if (res.body.code == 200) {
                            this.add_list = res.body.data.address_list;
                        }
                    });
                }
            },
            //附近地址的信息
            get_near:function(){
                let that = this;
                let map  = this.map;
                var options = {
                        onSearchComplete: function(results) {
                            if(local.getStatus() == BMAP_STATUS_SUCCESS) {
                                // 判断状态是否正确
                                var s = [];
                                for(var i = 0; i < results.getCurrentNumPois(); i++) {
                                    s.push(results.getPoi(i).address);
                                }
                                //console.log(s);
                                that.list_near = s
                            }
                        }
                }
                var local = new BMap.LocalSearch(map, options);
                local.search(this.adress_detail);
            },
            get_d:function(){
                let that = this;
                let map  = this.map;
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){console.log(r);
                        var mk = new BMap.Marker(r.point);
                        map.addOverlay(mk);
                        map.panTo(r.point);
                        that.longitude=r.point.lng ; // 获取经度
                        that.latitude=r.point.lat; //获取纬度
                        /*获取到的当前地址经纬度*/
                        // 创建地理编码实例
                        var myGeo = new BMap.Geocoder(r);
                        // 根据坐标得到地址描述
                        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result){
                            if (result){
                                that.adress_detail=result.address;//获取具体的地址信息
                                /* console.log(result)*/
                                that.adress_s=result.addressComponents.city;//获取市的地址信息
                                that.get_near();
                            };


                        });
                    }else {
                        //获取地址失败的函数方法
                        that.$router.push('/arrive_one')
                    }
                });
            },
            /*判断字符是否存在数组中*/
           /* get_select:function(a,b){
                if(a.indexOf(b)||b.indexOf(a)){
                    alert(1)
                }else{
                    alert(2)
                }
            },*/
            /*返回按钮*/
            get_tui:function(){
                window.history.go(-1);
            },
            //搜索返回附近地址

        }
    };

</script>
<style>
    .location_im{
        width:0.44rem;
        height:0.44rem;
        display:block;
        float:right;
        margin-right: -0.4rem;
        margin-top: 0.17rem;
    }
    /*定位gif图片*/
    .my_ul_1 li:last-of-type{
        border:0;
    }
    .my_ul_1 li{
        min-height:0.6rem;
        line-height:0.6rem;
        color:#303030;
        font-size:0.3rem;
        padding-left:0.2rem;
        border-bottom:0.01rem solid #f0f0f0;
        width:6rem;
        /*overflow: hidden;;
        text-overflow:ellipsis;
        white-space: nowrap;*/
    }
    .my_ul_1{
        width:100%;
        min-height:0.8rem;
        background:#ffffff;


    }
    /*附近地址*/
    .fu_jin_1{
        width:100%;
        height:0.7rem;
        line-height:0.7rem;
        color:#a1a0a0;
        font-size:0.26rem;
        text-indent:0.2rem;
    }
    /*附近地址*/
    .my_ming_p_1 img{
        display:block;
        position:absolute;
        top:0.26rem;
        width:0.27rem;
        height:0.17rem;
        right:2.1rem;

    }
    .my_ming_p_1{
        width:100%;
        height:0.7rem;
        line-height:0.7rem;
        text-align:center;
        color:#939292;
        font-size:0.24rem;
        position:relative;
    }
    /*添加地址的默认地址*/
    .my_add_1_1{
        padding-top: 0.3rem;
        min-height: 1.5rem;
        /* margin: 0.1rem 0; */
        width: 100%;
        position: relative;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }
    .my_add_1_xiu_2_1{
        width: 100%;
        height: 0.56rem;
        line-height: 0.56rem;
        color: black;
        font-size:0.28rem;
        /* margin-bottom: 0.1rem; */
        text-indent: 0.2rem;
    }
    .my_add_1_xiu_3_1{
        width:100%;
        height:1.04em;
        color:#969696;
        font-size:0.21rem;

    }
    .my_add_1_xiu_3_1 span{
        margin-left: 0.2rem;
        display: block;
        width: 5.9rem;
        font-size: 0.22rem;
        height: 1.04rem;
        line-height: 0.4rem;
        word-wrap: break-word;
    }
    .my_add_1_home_mm_1{
        height:0.32rem;
        width:0.62rem;
        border:0.01rem solid #fc1dac;
        line-height:0.32rem;
        text-align:center;
        font-size:0.2rem;
        border-radius:0.05rem;
        /*position:absolute;
        top: .4rem;
        left: 3.5rem;*/
        display:block;
        float:left;
        margin-top: -0.7rem;
        margin-left: 3rem;
        color:#fc1dac;
    }
    .my_p_1{
        height:0.8rem;
        line-height:0.8rem;
        text-indent: 0.2rem;
        color:#353535;
        font-size:0.28rem;
        border-bottom:0.01rem solid #f0f0f0;
    }
    .my_add_1{
        width:100%;
        min-height:2.2rem;
        background:#ffffff;
    }
    /*我的地址*/
    .arrive_span_1{
        display:block;
        width:auto;
        height:0.8rem;
        line-height:0.8rem;
        float:left;
        /*position:absolute;
        top:0;
        left:2.1rem;*/
        color:#c2c2c2;
        font-size:0.24rem;
        margin-top:0rem;
    }
    .arrive_pp_1 time{
        float:left;
        width:3.6rem;
     /*   width:auto;*/
        overflow: hidden;;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .im_xm_1{
       /* position:absolute;*/
        margin-top: 0.17rem;
        margin-left: 0.18rem;
        width:0.44rem;
        height:0.44rem;
        display:block;
        float:left;
     /*   top:0.2rem;
        left:0.18rem;*/
    }
    .im_yy_1{
        margin-right: 0.18rem;
        margin-top:0.17rem;
       /* position:absolute;*/
        width:0.42rem;
        height:0.44rem;
        display:block;
        float:right;
      /*  top: 0.2rem;
        right:0.14rem;*/
    }
    .arrive_pp_1{
        height:0.8rem;
        line-height:0.8rem;
        color:#c2c2c2;
        font-size:0.28rem;
        background:#ffffff;
      /*  text-indent: 0.73rem;*/
        position:relative;
        margin-bottom:0.02rem;
    }
    .arr_p_1{
        height:0.26rem;
        line-height:0.26rem;
        color:#ffb8e5;
        font-size:0.2rem;
    }
    .arrive_two_u_1 li img{
        display:block;
        position:absolute;
        width:0.28rem;
        height:0.31rem;
        top:0.28rem;
        left:0.18rem;
    }
    .arrive_two_u_1 li:nth-last-of-type{
        border:0;
    }
    .arrive_two_u_1 li{
        list-style:none;
        height:0.79rem;
        line-height:0.79rem;
        color:#a7a7a7;
        font-size:0.24rem;
        text-indent: 0.6rem;
        border-bottom:0.01rem solid #f5f4f2;
        position:relative;
    }
    /*two*/
    .arrive_two_kl_1{
        position:absolute;
        display:block;
        width:0.26rem;
        height:0.28rem;
        left:2rem;
        top:0.18rem;
    }
    .arrive_two_input_1{
        float:left;
        display:block;
        width:4.23rem;
        height:0.63rem;
        border:0;
        outline: none;
        margin-bottom:0.1rem;
        background:#f5f4f2;
        text-indent: 0.6rem;
    }
    #arrive_two_sel_add_1{
        width:1.78rem;
        height:0.63rem;
        border:0;
        background:#f5f4f2;
        outline: none;
        float:left;
        text-indent:0.4rem;
        margin-bottom:0.1rem;

        /*  padding-top:0.05rem;*/

        /*将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
    }
    #im_gmm_1{
        display:block;
        position:absolute;
        width:0.25rem;
        height:0.17rem;
        top: 0.5rem;
        left: 1.5rem;
        z-index: 5;
    }
    .arrive_two_first_1{
        width:6.05rem;
        height:0.63rem;
        background:#f5f4f2;
        margin:0 auto;
        border-radius:0.05rem;
        position:relative;
    }
    .arrive_two_container_1{
        width:100%;
        min-height: 1.2rem;
        padding-top:0.3rem;
        position:relative;
        background:#ffffff;
        margin-bottom:0.1rem;
    }
    /*1*/
    .arrive_two_top_1{
        height:0.8rem;
        width:100%;
        /*  border-bottom:1px solid #f0f0f0;*/
        position:relative;
        background:#ffffff;
        margin-bottom:0.01rem;
    }
    .arrive_two_top_1 img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .arrive_two_top_1 h4{
        height:0.8rem;
        color:#2eaffc;
        font-size:0.3rem;
        line-height:0.8rem;
        text-align:center;
        font-weight:normal;
    }
    .arrive_two_top_1 span{
        display:block;
        height:0.74rem;
        line-height: 0.74rem;
        font-size:0.26rem;
        color:#2eaffc;
        position:absolute;
        right:0.24rem;
        top:0;
    }

    .chose_one_1{
        background:#f5f4f2;
    }
</style>